<template>
	<view class="bigView">
		<view class="topView">
			
			<view style="display: flex;flex-direction: column;width: 100vw;">
				<!-- <view style="font-size: 40rpx;width: 100vw;display: flex;align-items: center;justify-content: center;color: #000000;" v-if="dateStr">{{dateStr}}</view> -->
				<view style="margin-top: 100rpx;display: flex;align-items: center;flex-direction: column;">
					<image :src="headerUrl" v-if="headerUrl" style="width: 80px;height: 80px;border-radius: 40px;"></image>
					<image src="/static/img/user_placeholder_img.png" style="width: 80px;height: 80px;border-radius: 40px;" v-else></image>
					<view style="color: red;margin-top: 20rpx;">{{failureReason}}</view>
				</view>
				<view style="margin-top: 30rpx;font-weight: bold;;color: red;font-size: 50rpx;width: 100%;display: flex;align-items: center;justify-content: center;">支付失败</view>
				<view style="width: 100vw;display: flex;align-items: center;justify-content: center;margin-top: 40rpx;font-size: 40rpx;">{{shopName}}</view>
			</view>
			<view class="bottomView" :style="[{height:bottom + 'px'}]">
				<view class="sure" @click="sureHandle">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { isJZNull } from '../../utils/auth'
	import points from '@/api/points.js'
	import UQRCode from 'uqrcodejs';
	// import uQRCode from 'uqrcodejs';
	export default{
		data(){
			return {
				bottom:0,
				status:0,
				userInfo:{},
				ruleSettings:'',
				currentUserName:'',
				headerUrl:'',
				shopName:'',
				dateStr:'',
				failureReason:''
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
		},
		onLoad(options){
			if(options.failureReason){
				this.failureReason = options.failureReason;
			}
			this.initUserInfo()
		},
		methods:{
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo);
					// this.form.userId = this.userInfo.id;
					if (this.userInfo.realName) {
						this.currentUserName = this.userInfo.realName
					}else if (this.userInfo.name) {
						this.currentUserName = this.userInfo.name
					} else{
						this.currentUserName = this.userInfo.phone
					}
					this.headerUrl = this.userInfo.headPicUrl;
				}
			},
			sureHandle(){
				uni.switchTab({
					url:'/pages/mine/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
}
.topView{
	margin-top: 8px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
	justify-content: space-around;
}
.bottomView{
	height: 150px;
	width: 100vw;
	// background-color: yellow;
	display: flex;
	justify-content: center;
	.sure{
		width: 280rpx;//calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px red solid;
		color: red;
	}
}
</style>